<template>
  <div class="card content-box">
    <span class="text">富文本编辑器 🍓🍇🍈🍉</span>
    <el-form label-position="top" ref="formRule" :model="state.form" :rules="formRules">
      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="富文本：" prop="content">
            <WangEditor v-model:value="state.form.content" height="400px" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center" style="margin: 20px 0">
      <el-button @click="submitForm" type="primary">提交表单</el-button>
      <el-button type="primary" @click="dialogVisible = true"> 内容预览 </el-button>
    </el-row>
    <el-descriptions title="配置项 📚" :column="1" border>
      <el-descriptions-item label="value"> 双向绑定的 value 值，使用示例： v-model:value="content"> </el-descriptions-item>
      <el-descriptions-item label="toolbarConfig">
        富文本 ToolBar区域 配置：
        <a href="https://www.wangeditor.com/v5/toolbar-config.html"> https://www.wangeditor.com/v5/toolbar-config.html </a>
      </el-descriptions-item>
      <el-descriptions-item label="editorConfig">
        富文本 编辑区域 配置：
        <a href="https://www.wangeditor.com/v5/editor-config.html"> https://www.wangeditor.com/v5/editor-config.html </a>
      </el-descriptions-item>
      <el-descriptions-item label="height"> 富文本高度，默认为 500px </el-descriptions-item>
      <el-descriptions-item label="mode"> 富文本模式，默认为 default（"default" | "simple"） </el-descriptions-item>
      <el-descriptions-item label="hideToolBar"> 隐藏 ToolBar 区域，默认为 false </el-descriptions-item>
      <el-descriptions-item label="disabled"> 禁用富文本编辑器，默认为 false </el-descriptions-item>
    </el-descriptions>
    <el-dialog v-model="dialogVisible" title="富文本内容预览" width="1300px" top="50px">
      <div class="view" v-html="state.form.content"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeMount, getCurrentInstance, nextTick, watch, onBeforeUnmount } from "vue";
import WangEditor from "@/components/WangEditor/index.vue";

const dialogVisible = ref(false);
const state = reactive({
  form: {
    content: ""
  }
});

// #region 表单校验
// 校验规则及参数
const formRule = ref();
const formRules = reactive({
  content: [{ required: true, message: "请输入", trigger: "blur" }]
});

// 校验方法
const validateForm = async () => {
  try {
    await formRule.value.validate(); // 校验多个表单
    return true; // 校验通过
  } catch (error) {
    console.log(error);
    return false; // 校验失败
  }
};

// 提交表单
const activityEnter = () => {
  console.log(state.form);
};

// 提交校验
const submitForm = async () => {
  const isValid = await validateForm();
  if (isValid) {
    // 表单校验通过，执行提交操作
    console.log("表单校验成功");
    activityEnter();
  } else {
    // 表单校验失败，显示错误信息
    console.log("表单校验失败");
  }
};
// #endregion
</script>

<style lang="scss" scoped></style>
